<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <link rel="stylesheet" href="/css/detail.css">
</head>

<body>
  <header class="header"></header>
  <!-- 商品概要 -->
  <div class="nav-top"></div>
  <!-- 商品详情部分 -->
  <main>
    <div class="detail" id="detail">

    </div>
    <script type="text/html" id="detailTemplate">
        <div class="detail-left">
          <div class="keyboardImg" id="box">
            <img id="keyboard" src="{{photo[0].url}}" data-zoom-image="{{photo[0].url}}">
          </div>
          <ol id="imgList" class="imgList" data-zoom-image="{{photo[0].url}}">
            {{each photo img}}
            <a href="#" data-image="{{img.url}}" data-zoom-image="{{img.url}}">
              <img id="img_01" src="{{img.url}}" />
            </a>
            {{/each}}
          </ol>
        </div>

        <div class="detail-right">
          <div class="intro-top">
            <!-- 收藏 -->
            <span class="glyphicon glyphicon-heart collection" style="margin-right:5px; ">收藏</span>
            <!-- 分享 -->
            <span class="share">
              <img src="/images/detail/1_03.png" style="width: 20px;height: 20px;">分享
              <ul class="drop-menu">
                <li><img src="/images/detail/douban.png"></li>
                <li><img src="/images/detail/facebook.png"></li>
                <li><img src="/images/detail/QQ.png"></li>
                <li><img src="/images/detail/wechat.png"></li>
                <li><img src="/images/detail/weibo.png"></li>
                <li><img src="/images/detail/zol.png"></li>
              </ul>
            </span>
            <p class="detail-title">{{qunTitle}}</p>
            <div class="detail-choice">
              <p>选择轴体:</p>
              {{each descContentList bigImg}}
              <img src="{{bigImg.image.url}}">
              {{/each}}
            </div>
            <div class="detail-function">
              <p>选择功能:</p>
              <div class="detail-box">VA(有线)</div>
              <p class="detail-price" style="font-size: 40px;margin-top: 10px;">¥{{originPrice}}</p>
              <div id="changeNum" class="changeNum">
                数量:<input type="text" value="0" class="form-control">
                <button class="addBtn" type="button">+</button>
                <button class="subBtn" type="button" disabled>-</button>
              </div>
              <button class="joinBtn" id="joinBtn">加入购物车</button>
              <button class="buyBtn" id="buyBtn"><a href="/html/shopCart.html">立即购买</a></button>
            </div>
          </div>
        </div>

    </script>
    <div id="shopCart">
      <a href="/html/shopCart.html">购物车</a>
      <p id="shopNum">0</p>
    </div>
  </main>
  <footer></footer>
  <!-- 头尾复用 -->
  <script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</body>

</html>